<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
</head>
<body>


<h1>通知中心</h1>


<div class="content">
    <div id="messageArea" style="margin-top: 20px;">
        <h3>最新通知</h3>
        <ul id="messages"></ul>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<script th:inline="javascript">
  var stompClient = null;
  var mobile = [[${mobile}]]; // 确保从服务器端获取用户手机号

  function connect() {
    var socket = new SockJS('/ws?mobile=' + encodeURIComponent(mobile));
    stompClient = Stomp.over(socket);

    stompClient.connect({}, function(frame) {
      console.log('Connected: ' + frame);

      // 添加对签到消息的订阅
      stompClient.subscribe('/user/' + mobile + '/queue/private-sign-up', function(message) {
        console.log('收到签到消息:', message.body); // 添加调试日志
        var signInfo = JSON.parse(message.body);
        showSignMessage(signInfo);

        // 在getMsg元素中也显示消息
        // document.getElementById('getMsg').innerHTML +=
        //     '<p>收到签到消息: ' + JSON.stringify(signInfo) + '</p>';
      });

      // 保留原有的订阅
      stompClient.subscribe('/topic/public', function(message) {
        showMessage(JSON.parse(message.body));
      });
    });
  }

  // 修改显示签到消息的函数，使其更详细
  function showSignMessage(signInfo) {
    var messageArea = document.getElementById('messages');
    var li = document.createElement('li');
    li.innerHTML = `
            <div class="alert alert-info">

                <strong>收到新的签到通知！</strong><br>
                <p>时间: ${new Date().toLocaleString()}</p>
                <p>活动名称: ${signInfo.activityName || '未指定'}</p>
                <p>地点: ${signInfo.address || '未指定'}</p>
                <p>持续时间: ${signInfo.sustainTime || '0'}分钟</p>
                ${signInfo.message ? '<p>消息: ' + signInfo.message + '</p>' : ''}
            </div>
        `;
    messageArea.insertBefore(li, messageArea.firstChild);
  }

  window.onload = connect;
</script>
</body>
</html>